import React from 'react';
import timer from '@/utils/timer';
import { PullToRefresh, ListView } from 'antd-mobile';
import { inject, observer } from 'mobx-react';
import ShowLoading from '@/components/ShowLoading';
interface props {
  lists: {
    id: string;
    avatar: string;
    username: string;
    createTime: Date;
    info: string;
  }[];
  showLoading: boolean | null | undefined;
}
const Lists = function(props: props) {
  const { lists, showLoading } = props;
  const { houseStore }: any = props;

  const handleRefresh = () => {
    houseStore.reloadComments();
  };
  const dataSource = new ListView.DataSource({
    rowHasChanged: (r1: any, r2: any) => r1 !== r2,
  });
  const row = (item: any) => (
    <div className="comment-lists_item" key={item?.id}>
      <img alt="user" className="avatar" src={item?.user?.avatar} />
      <div className="right">
        <div className="right-top">
          <p>{item?.user?.username}</p>
          <p>{timer(item?.createTime)}</p>
        </div>
        <div className="right-bottom">{item?.msg}</div>
      </div>
    </div>
  );

  return (
    <div className="comment">
      <h1 className="comment-title">评论</h1>
      <div className="comment-lists">
        <ListView
          dataSource={dataSource.cloneWithRows(lists)}
          renderFooter={() => <ShowLoading showLoading={showLoading} />}
          style={{ height: '100vh' }}
          onEndReached={handleRefresh}
          renderRow={row}
        />
        <ShowLoading showLoading={showLoading} />
      </div>
    </div>
  );
};
export default inject('houseStore')(observer(Lists));
